<!-- Created by jack on 2022/3/10 - 14:19 -->
<style scoped lang="less">
.position-top{ top:v-bind(gap);left: 50%; transform: translateX(-50%); }
.position-left{ left: v-bind(gap); top:50%;transform: translateY(-50%) }
.position-bottom{ left: 50%; transform: translateX(-50%); bottom:v-bind(gap); }
.position-right{ right:v-bind(gap); top:50%;transform: translateY(-50%) }
@keyframes show-dock-bar { from{ opacity: 0 } to{ opacity: 1 } }
.dock-bar{
  user-select: none;
  z-index: 20000;
  transition: all ease-in-out 300ms;
  animation: show-dock-bar 500ms ease-in-out 0s 1 forwards;
  padding: 6px 8px;
  border-radius: 20px;
  overflow: hidden;
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: rgba(175, 170, 170, 0.3);
  backdrop-filter: blur(5px);
  &__left{
    //position: relative;
    display: flex;
    flex-direction: row;
    align-content: center;
  }
  &__divider{
    display: inline-block;
    margin: 0 10px;
    width: 2px;
    height: 100%;
    background: #090909;
  }
  &__right{
    display: flex;
    flex-direction: row;
  }
}

.fade-enter-active, .fade-leave-active {
  transition: all 300ms;
}
.fade-leave-active {
  position: absolute;
}
.fade-move{
  transition: transform ease-in-out 300ms;
}
.fade-enter,.fade-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>

<template>
<div class="dock-bar" :class="position" id="dockBar">
    <transition-group name="fade" tag="div" class="dock-bar__left">
      <item v-for="(ele,index) of applicationList" :item="ele" :id="ele" :key="ele"/>
    </transition-group>
<!--   <div class="dock-bar__divider" v-if="minSizeWindowList && minSizeWindowList.length"/>-->
<!--    <transition-group name="fade" tag="div"  class="dock-bar__right">-->
<!--      <rightItem v-for="(ele,index) of minSizeWindowList" :item="ele"  :key="ele.id"/>-->
<!--    </transition-group>-->
</div>
</template>



<script lang="ts" setup>
import  item from './item.vue'
import rightItem from './rightItem.vue'
import WindowStore from '@/components/window/src/store'
import DockBar from "./store";
const windowStore = WindowStore()
const dockBarStore = DockBar()
import {computed, onMounted, watch} from "vue";

const gap = computed( _ => dockBarStore.$state.gap + 'px')
const position = computed( _ => 'position-' + dockBarStore.$state.position) // left // bottom // right // top


const applicationList = computed( _ => ([...dockBarStore.$state.defaultList,...Array.from(windowStore.$state.openWindowList)]))
const minSizeWindowList = computed(_ => (Array.from(windowStore.$state.minSizeList)))

</script>
